<script setup lang="ts">
import BlockHead from './block-head.vue'
import type { BasicInfo } from '../type'

defineOptions({
  name: 'ItemOne',
})
defineProps<{
  data: BasicInfo
}>()
</script>

<template>
  <div class="flex flex-col">
    <BlockHead title="员工总览" />
    <div class="block-body h-70 w-full flex flex-auto flex-wrap overflow-auto">
      <div class="relative mx-auto my-4 h-[calc(100%-2rem)] w-[calc(100%-2rem)] flex">
        <div class="left-item h-full w-1/2 flex flex-col">
          <div class="h-1/2 flex items-center">
            <div class="item-icon h-19 w-20 flex-shrink-0">
              <img src="./hr-item-one-icon-1.png" class="h-8 w-8">
            </div>
            <div class="flex flex-auto flex-col">
              <div class="text-lg text-[#C0E7FF] opacity-80 font-pmzd">
                男性
              </div>
              <div class="text-xl text-[#17E6FF] font-pmzd">
                {{ data.manNum }}
              </div>
            </div>
          </div>
          <div class="h-1/2 flex items-center">
            <div class="item-icon h-19 w-20 flex-shrink-0">
              <img src="./hr-item-one-icon-3.png" class="h-8 w-8">
            </div>
            <div class="flex flex-auto flex-col">
              <div class="text-lg text-[#C0E7FF] opacity-80 font-pmzd">
                女性
              </div>
              <div class="text-xl text-[#17E6FF] font-pmzd">
                {{ data.womanNum }}
              </div>
            </div>
          </div>
        </div>
        <div class="right-item h-full w-1/2 flex flex-col">
          <div class="h-1/2 flex items-center">
            <div class="item-icon h-19 w-20 flex-shrink-0">
              <img src="./hr-item-one-icon-2.png" class="h-8 w-8">
            </div>
            <div class="flex flex-auto flex-col">
              <div class="text-lg text-[#C0E7FF] opacity-80 font-pmzd">
                新招人数
              </div>
              <div class="text-xl text-[#17E6FF] font-pmzd">
                {{ data.newNum }}
              </div>
            </div>
          </div>
          <div class="h-1/2 flex items-center">
            <div class="item-icon h-19 w-20 flex-shrink-0">
              <img src="./hr-item-one-icon-4.png" class="h-8 w-8">
            </div>
            <div class="flex flex-auto flex-col">
              <div class="text-lg text-[#C0E7FF] opacity-80 font-pmzd">
                离职人数
              </div>
              <div class="text-xl text-[#17E6FF] font-pmzd">
                {{ data.resignationNum }}
              </div>
            </div>
          </div>
        </div>
        <div class="middle-item absolute left-1/2 top-1/2 h-44 w-44 flex flex-col items-center justify-center -translate-x-1/2 -translate-y-1/2">
          <div class="text-xl text-[#17E6FF] font-pmzd">
            {{ data.totalNum }}
          </div>
          <img src="./hr-item-one-middle-ttt.png" class="my-1">
          <div class="text-sm text-[#D0E2F9] opacity-80">
            总人数
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left-item {
  background: url('./item-one-left-bg.png') no-repeat;
  background-size: auto 100%;
  background-position: right center;
  &:after {
    background: url('./item-one-left-ttt.png') no-repeat;
    background-position: left center;
  }
}
.right-item {
  background: url('./item-one-right-bg.png') no-repeat;
  background-size: auto 100%;
  background-position: left center;
  &::after {
    background: url('./item-one-right-ttt.png') no-repeat;
    background-position: right center;
  }
}
.left-item,
.right-item {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0.5rem;
  }
  .item-icon {
    background: url('./item-one-icon-base.png') no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    text-align: center;
  }
}
.left-item {
  .item-icon {
    margin-left: 1rem;
  }
}
.right-item {
  .item-icon {
    margin-left: 5.2rem;
  }
}
.middle-item {
  background: url('./item-one-middle-bg.png') no-repeat;
  background-size: cover;
}
</style>
